<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <input type="text" v-focus /> -->
      <div v-demo:a.50.red="d">hello Vue!</div>
      <div v-demo:a.100.green="d">hello Vue!</div>
      <div v-demo:a.120.black="900">hello Vue!</div>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 注册一个全局自定义指令 `v-focus`
      // Vue.directive("focus", {
      //   // 当被绑定的元素插入到 DOM 中时……
      //   inserted: function (el) {
      //     // 聚焦元素
      //     el.focus();
      //   },
      // });

      new Vue({
        el: "#app",
        data: {
          d: 500,
        },
        // directives: {
        //   focus: {
        //     // 指令的定义
        //     inserted: function (el) {
        //       el.focus();
        //     },
        //   },
        // },

        // directives: {
        //   demo: {
        //     bind(el, binding, vnode, oldVnode) {},
        //     inserted(el, binding, vnode, oldVnode) {},
        //     update(el, binding, vnode, oldVnode) {},
        //     componentUpdated(el, binding, vnode, oldVnode) {},
        //     unbind(el, binding, vnode, oldVnode) {},
        //   },
        // },

        // 在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子
        directives: {
          demo(el, binding, vnode, oldVnode) {
            // console.log(el);
            // console.log(binding);
            /*
              binding: 
                arg: "a"  参数
                expression: "d"  值
                modifiers:   修饰符
                  b: true
                  c: true
                name: "demo" 指令名
                value: 88
            */
            const [size, color] = Object.keys(binding.modifiers); // ["50", "red"]
            const weight = binding.expression;
            el.style.fontSize = size + "px";
            el.style.color = color;
            el.style.fontWeight = weight;
          },
        },
      });

      // bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

      // inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

      // update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

      // 我们会在稍后讨论渲染函数时介绍更多 VNodes 的细节。

      // componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

      // unbind：只调用一次，指令与元素解绑时调用。
    </script>
  </body>
</html>
